<template>
  <el-dialog :title="textMap[dialogStatus]" :visible="visible" @open="open" @close="handleDialogClose">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="12">
          <el-form-item label="项目名称" prop="title">
            <el-input
              v-model="formData.title"
              placeholder="请输入项目名称"
              :maxlength="11"
              clearable
              prefix-icon="el-icon-warning-outline"
              :style="{width: '100%'}"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业名称" prop="company">
            <el-input v-model="formData.company" placeholder="请输入企业名称" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="项目logo" prop="logo">
            <el-upload
              class="avatar-uploader"
              :action="logoAction"
              :show-file-list="false"
              :on-success="logoUploadSuccess"
              :before-upload="logoBeforeUpload"
            >
              <img v-if="formData.logo" :src="formData.logo" class="avatar" alt="头像">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属行业" prop="industry">
            <el-select v-model="formData.industry" placeholder="请选择下拉选择" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in conditions.industry"
                :key="index"
                :label="item.title"
                :value="item._id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创业方式" prop="type">
            <el-select v-model="formData.type" placeholder="请选择创业方式" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in conditions.type"
                :key="index"
                :label="item.title"
                :value="item._id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="投入资金" prop="money">
            <el-select v-model="formData.money" placeholder="请选择投入资金" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in conditions.money"
                :key="index"
                :label="item.title"
                :value="item._id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发展区域" prop="area">
            <el-select v-model="formData.area" placeholder="请选择发展区域" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in conditions.area"
                :key="index"
                :label="item.title"
                :value="item._id"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="面向人群" prop="crowd">
            <el-select v-model="formData.crowd" placeholder="请选择面向人群" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in conditions.crowd"
                :key="index"
                :label="item.title"
                :value="item._id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开店区域" prop="position">
            <el-select v-model="formData.position" placeholder="请选择开店区域" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in conditions.position"
                :key="index"
                :label="item.title"
                :value="item._id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="热推项目" prop="isHot">
            <el-switch v-model="formData.isHot" />
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="所属分类" prop="cid">
            <el-cascader
              v-model="formData.cids"
              :options="categories"
              :props="cascaderProps"
              :show-all-levels="true"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="项目描述" prop="field110">
            <editor :cur-value="formData.content" @input="newContent" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-dialog>
</template>

<script>
import { tree2 } from '@/api/item/categroy'
import { conditions, save, edit } from '@/api/item'
import editor from '@/components/tinymce'
import { trim } from 'core-js/internals/string-trim'

function isEmpty(str) {
  return !(str != null && trim(str).length > 0)
}

export default {
  name: 'ItemDialog',
  components: {
    editor
  },
  props: {
    dialogStatus: {
      require: true,
      type: String,
      default: () => {
        return '创建'
      }
    },
    dialogFormVisible: {
      type: Boolean,
      default: () => false
    },
    id: {
      type: String,
      required: false,
      default: () => ''
    }
  },
  data() {
    return {
      cascaderProps: {
        checkStrictly: true,
        label: 'title',
        value: '_id',
        emitPath: true
      },
      logoAction: 'https://tt.yinglianzhirong.com/api/upload',
      textMap: {
        update: '编辑创业项目',
        create: '创建创业项目'
      },
      formData: {
        _id: '',
        title: '',
        company: '',
        industry: '',
        type: '',
        money: '',
        area: '',
        crowd: '',
        position: '',
        isHot: false,
        cid: '',
        logo: '',
        content: '',
        cids: []
      },
      rules: {
        title: [{
          required: true,
          message: '请输入项目名称',
          trigger: 'blur'
        }]
      },
      categories: [],
      conditions: {}
    }
  },
  computed: {
    visible: {
      get: function() {
        const me = this
        return me.dialogFormVisible
      },
      set: function(val) {
      }
    }
  },
  mounted() {
    this.getConditions()
    this.getCategories()
  },
  methods: {
    handleDialogClose() {
      this.$refs['elForm'].clearValidate()
      this.resetForm()
      this.$emit('save')
    },
    getItem(id) {
      // console.log('id 为空判断', isEmpty(id))
      this.$refs['elForm'] && this.$refs['elForm'].clearValidate()
      if (isEmpty(id)) {
        this.resetForm()
        this.$refs['elForm'] && this.$refs['elForm'].resetFields()
      } else {
        edit(id).then(res => {
          this.$refs['elForm'].clearValidate()
          this.formData = res.data
        })
      }
    },
    newContent(val) {
      this.formData.content = val
    },
    getCategories() {
      tree2().then((res) => {
        this.categories = res.data.items
      })
    },
    getConditions() {
      conditions().then((res) => {
        this.conditions = res.data
      })
    },
    open() {
      this.getItem(this.id)
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          save(this.formData).then(() => {
            this.$emit('save')
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    resetForm() {
      this.formData = {
        _id: '',
        title: '',
        company: '',
        industry: '',
        type: '',
        money: '',
        area: '',
        crowd: '',
        position: '',
        isHot: false,
        cid: '',
        logo: '',
        content: '',
        cids: []
      }
    },
    logoBeforeUpload(file) {
      const isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    logoUploadSuccess(res, file) {
      this.formData.logo = res
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader{
  width: 200px;
  img{
    width: 100%;
  }
}
</style>
